<template>
    <div class="me">
        <div class="me-top">
            <img src="../../assets/images/usertopbanner.png" alt="">
        </div>
        <div class="me-user">
            <div class="user-png">
                <img v-if="$store.state.isLogin" src="../../assets/images/touxiang.png" alt="">
                <img v-else src="../../assets/images/touxiang-m.png" alt="">
            </div>
        </div>
        <div class="clear"></div>
        <div class="button" v-if="!$store.state.isLogin" @click="$router.push('/login')">লগইন করুন</div>
        <div class="username" v-else>{{ $store.state.user.userInfo.phone }}</div>
        <div class="me-nav">
            <div class="me-nav-left" @click="$router.push('shouye')">
                <div class="me-nav-icon">
                    <img src="../../assets/images/home.png" alt="">
                </div>
            </div>
            <div class="me-nav-rigth">
                <div class="me-nav-icon">
                    <img src="../../assets/images/user-m.png" alt="">
                </div>
            </div>
        </div>
        <!-- 功能模块 -->
        <ul class="me-gongneng">
            <!-- 钱包 -->
            <li @click="toOrder">
                <div class="me-icon">
                    <img src="../../assets/images/1.png" alt="">
                </div>
                <div class="me-icon-desc">আমার ধার</div>
            </li>
            <!-- 安全 -->
            <li @click="$router.push('/myyinsi')">
                <div class="me-icon">
                    <img src="../../assets/images/2.png" alt="">
                </div>
                <div class="me-icon-desc">গোপনীয়তা চুক্তি</div>
            </li>
            <!-- 客服 -->
            <li @click="lianxiMe">
                <div class="me-icon">
                    <img src="../../assets/images/3.png" alt="">
                </div>
                <div class="me-icon-desc">গ্রাহক সেবা</div>
            </li>
            <!-- 声明 -->
            <li @click="$router.push('/myshengming')">
                <div class="me-icon">
                    <img src="../../assets/images/4.png" alt="">
                </div>
                <div class="me-icon-desc">শর্তাবলী</div>
            </li>
            <li @click="$router.push('/mytiaokuan')">
                <div class="me-icon">
                    <img src="../../assets/images/5.png" alt="">
                </div>
                <div class="me-icon-desc">অনুমতি চুক্তি</div>
            </li>
            <!-- 关于 -->
            <li @click="$router.push('/myinfo')">
                <div class="me-icon">
                    <img src="../../assets/images/6.png" alt="">
                </div>
                <div class="me-icon-desc">আমাদের সম্বন্ধে</div>
            </li>
        </ul>
        <div class="me-banner">
            <img src="../../assets/images/userbanner.png" alt="">
        </div>
        <div class="me-btn" @click="toLeave" v-if="$store.state.isLogin">সাইন আউট</div>
    </div>
</template>

<script>
import { Dialog } from 'vant'
export default {
    data() {
        return {

        }
    },
    methods: {
        //退出
        toLeave() {
            Dialog.confirm({
                message: 'আপনি কি নিশ্চিত যে আপনি প্রস্থান করতে চান?',
                confirmButtonText: 'নিশ্চিত করো',
                cancelButtonText: 'বাতিল করুন'
            }).then(() => {
                this.$store.commit('user/clearuserInfo')
                this.$store.commit('logout')
            });
        },
        lianxiMe() {
            //邮箱联系我们
            const emailAddress = "hbgyoujkldc5@gmail.com"; // 将要跳转的邮箱地址
            window.location.href = "mailto:" + emailAddress; // 跳转到默认邮件应用程序
        },
        //去订单列表
        toOrder() {
            if (this.$store.state.isLogin) {
                this.$router.push('/order')
                this.$store.commit('changeCount', 1)
            } else {
                this.$router.push('/login')
            }
        }
    },
    created() {
        window.scrollTo({
            top: 0,
            behavior: "smooth"
        });
    }
}
</script>
<style lang="less" scoped>
.me {
    position: relative;
    width: 100vw;
    background-color: #f5f5f5;
    height: (720/@a);

    .me-btn {
        width: (331/@a);
        height: (48/@a);
        background: #415AB8;
        border-radius: (10/@a);
        background-color: #415AB8;
        text-align: center;
        line-height: (48/@a);
        font-size: (16/@a);
        font-family: Nirmala UI;
        font-weight: bold;
        margin-top: (11/@a);
        margin-left: (22/@a);
        color: #FFFFFF;
    }

    .me-banner {
        width: (331/@a);
        height: (135/@a);
        background: #415AB8;
        border-radius: (16/@a);
        margin-left: (22/@a);

        img {
            width: 100%;
        }
    }

    .me-gongneng {
        width: (333/@a);
        height: (226/@a);
        background: #FFFFFF;
        border-radius: (16/@a);
        margin: (8/@a) (21/@a) (10/@a) (21/@a);

        li {
            float: left;
            width: (111/@a);
            height: (113/@a);
            text-align: center;

            .me-icon-desc {
                text-align: center;
                font-size: (10/@a);
                font-family: Nirmala UI;
                font-weight: bold;
                color: #757575;
            }

            .me-icon {
                width: (59/@a);
                height: (65/@a);
                margin-top: (19/@a);
                margin-left: (24/@a);

                img {
                    width: 100%;
                }
            }
        }
    }

    .me-user {
        position: absolute;
        top: (100/@a);
        left: 0;
        text-align: center;

        .user-png {
            margin-left: (151/@a);
            width: (72/@a);
            height: (72/@a);

            img {
                width: 100%;
            }
        }
    }

    .clear {
        width: 100vw;
        height: (35/@a);
    }

    .username {
        text-align: center;
    }

    .button {
        margin-left: (134/@a);
        width: (107/@a);
        height: (28/@a);
        background: #415AB8;
        border-radius: (14/@a);
        text-align: center;
        font-size: (9/@a);
        font-family: Nirmala UI;
        font-weight: bold;
        color: #FFFFFF;
        line-height: (28/@a);
    }

    .me-top {
        width: 100vw;
        height: (143/@a);

        img {
            width: 100%;
        }
    }

    .me-nav {
        display: flex;
        justify-content: space-around;
        position: fixed;
        bottom: 0;
        width: 100vw;
        height: (52/@a);
        background: #FFFFFF;

        .me-nav-left {
            width: (30/@a);
            height: (24/@a);
            line-height: (35/@a);

            .me-nav-icon {
                margin-top: (10/@a);
                width: (30/@a);
                height: (24/@a);

                img {
                    width: 100%;
                }
            }

            .me-nav-desc {
                font-size: (9/@a);
                font-family: Nirmala UI;
                font-weight: bold;
                color: #ACACAC;
            }
        }

        .me-nav-rigth {
            width: (25/@a);
            height: (30/@a);

            .me-nav-icon {
                margin-top: (10/@a);
                width: (25/@a);
                height: (25/@a);

                img {
                    width: 100%;
                }
            }

            .me-nav-desc {
                margin-top: (10/@a);
                font-size: (9/@a);
                font-family: Nirmala UI;
                font-weight: bold;
                color: #415AB8;
            }
        }
    }
}
</style>